<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script type="text/javascript" src="lib/Vue/vue.js"></script>
    <script type="text/javascript" src="lib/Vue/axios.min.js"></script>
    <script type="text/javascript" src="lib/Vue.util/axiosUtils.js"></script>
    <script src="vendor/jquery/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link href="static/h-ui/css/H-ui.min.css" rel="stylesheet"
          type="text/css" />
    <link href="static/h-ui.admin/css/H-ui.login.css" rel="stylesheet"
          type="text/css" />
    <link href="static/h-ui.admin/css/style.css" rel="stylesheet"
          type="text/css" />
    <link href="lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet"
          type="text/css" />
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template-->
    <link href="vendor/font-awesome/css/font-awesome.min.css"
          rel="stylesheet" type="text/css">
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>跨境电商平台</title>
    <meta name="keywords"
          content="跨境电商平台">
    <meta name="description"
          content="跨境电商平台">
</head>
<body>
<div id="app">
    <input type="hidden" id="TenantId" name="TenantId" value="" />
    <div class="header">
        <font color="white" size="6">跨境电商平台</font>
    </div>
    <div class="card-register">
        <div id="loginform" class="loginBox">
            <form class="form form-horizontal" action="#" th:action="@{/user-register}" th:object="${user}" method="post">
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                    <div class="formControls col-xs-8">
                        <input type="text"  id="username" name="username"  placeholder="用户名"  class="input-text size-L"
                               style="width:400px;" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                    <div class="formControls col-xs-8">
                        <input type="password" id="password" name="password" placeholder="密码"  class="input-text size-L"
                               style="width:400px;"  />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                    <div class="formControls col-xs-8">
                        <input type="text"  id="phonenumber" name="phonenumber"  placeholder="电话号码"  class="input-text size-L"
                               style="width:400px;" />
                    </div>
                </div>
                <div class="row cl">
                    <div class="formControls col-xs-8 col-xs-offset-3">
                        <!-- <input type="checkbox" name="online" id="online" value="">
                        使我保持登录状态</label> -->
                        <div class="mt-20 skin-minimal">
                            <div class="radio-box">
                                <input type="radio" id="bvo" name="role" value="bvo">
                                <label for="bvo">借卖方</label>
                            </div>
                            <div class="radio-box">
                                <input type="radio" id="mvo" name="role" value="mvo" checked>
                                <label for="mvo">品牌商</label>
                            </div>
<!--                            <div class="radio-box">-->
<!--                                <input type="radio" id="adm" name="role" value="adm" >-->
<!--                                <label for="adm">系统管理员</label>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <div class="formControls col-xs-8 col-offset-3">
                        <input type="text" value=""  placeholder="请输入验证码（不区分大小写）" class="input-val">
                        <canvas id="canvas" width="100" height="30"></canvas>
                        <!-- <button class="btn">提交</button> -->
                    </div>
                </div>
                <div class="row cl">
                    <div class="formControls col-xs-3 col-xs-offset-3">
                        <input name="" id="register"  class="btn btn-success radius size-L" type="button" value="注册">
                        <button  id="btn" type="submit" style="display:none"></button>
                    </div>
                    <span class="help-block" style = "font-weight:bold"><font color='red'  th:text="${error}"></font></span>
                </div>
            </form>
        </div>
<!--        <div class="footer">create by liuq</div>-->
    </div>
</div>
    <script type="text/javascript">
        $(function(){
            var show_num = [];
            draw(show_num);
            $("#canvas").on('click',function(){
                draw(show_num);
            })
            $(".btn").on('click',function(){
                var val = $(".input-val").val().toLowerCase();
                var num = show_num.join("");
                if($("#username").val()==""){
                    alert('输入用户名不能为空');
                }else if($("#password").val()==""){
                    alert('输入密码不能为空');
                }else if(val==''){
                    alert('请输入验证码！');
                }else if($("#phonenumber").val()==""){
                    alert('手机号不能为空');
                }else if(val == num){
                    $(".input-val").val('');
                    $('#btn').trigger("click");
                }else{
                    alert('验证码错误！请重新输入！');
                    $(".input-val").val('');
                    // draw(show_num);
                }
            })
        })
        //生成并渲染出验证码图形
        function draw(show_num) {
            var canvas_width=$('#canvas').width();
            var canvas_height=$('#canvas').height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度
            for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var deg = Math.random() - 0.5; //产生一个随机弧度
                var txt = aCode[j];//得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";
                context.translate(x, y);
                context.rotate(deg);
                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);
                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }
        //得到随机的颜色值
        function randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    </script>
</body>
</html>